import React from 'react';
import './UserOrder.scss';
import { Link } from 'react-router-dom';
import { RightOutline } from 'antd-mobile-icons';
import { Badge, Grid } from 'antd-mobile';
import SvgIcon from '@/components/SvgIcon/SvgIcon';
import { useEnhanceSelector } from '@/hooks';

const UserOrder: React.FunctionComponent = () => {

  // 用户信息
  const userInfo = useEnhanceSelector((state) => state.userStore.userInfo);

  return (
    <div className="user-order">
      <div className="head">
        <h3>药品订单</h3>
        <Link to="/order">
          <span>全部订单</span>
          <RightOutline color="var(--cp-tip)"></RightOutline>
        </Link>
      </div>
      <div className="grid">
        <Grid columns={4}>
          <Grid.Item>
            <Badge content={userInfo?.orderInfo?.paidNumber || '99+'}>
              <SvgIcon name="paid" width="35px" height="35px"></SvgIcon>
              <p>待付款</p>
            </Badge>
          </Grid.Item>
          <Grid.Item>
            <Badge content={userInfo?.orderInfo?.receivedNumber || '99+'}>
              <SvgIcon name="shipped" width="35px" height="35px"></SvgIcon>
              <p>待发货</p>
            </Badge>
          </Grid.Item>
          <Grid.Item>
            <Badge content={userInfo?.orderInfo?.shippedNumber || '99+'}>
              <SvgIcon name="received" width="35px" height="35px"></SvgIcon>
              <p>待收货</p>
            </Badge>
          </Grid.Item>
          <Grid.Item>
            <Badge content={userInfo?.orderInfo?.finishedNumber || '99+'}>
              <SvgIcon name="finished" width="35px" height="35px"></SvgIcon>
              <p>已完成</p>
            </Badge>
          </Grid.Item>
        </Grid>
      </div>
    </div>
  );
};

export default UserOrder;